<template>
  <div id="userSecure">
    <div class="userMaterialTitle">
      <h2 class="active">账号安全 <span></span></h2>
    </div>
    <div class="userTaskContent">
      <div class="userMaterialMaterial" v-show="changeAccountIndex === -1">
        <ul>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>邮箱账号</span>
            </div>
            <div class="userMaterialMaterialRight">
              <p>可以使用 {{userInfo.email}} 登录</p>
              <button class="default" @click="showChangeAccountTab(0)">更换</button>
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>手机账号</span>
            </div>
            <div class="userMaterialMaterialRight">
              <p>可以使用{{userInfo.phone}}登录</p>
              <button class="default" @click="showChangeAccountTab(1)">更换</button>
            </div>
          </li>
          <li>
            <div class="userMaterialMaterialLeft">
              <span>登录密码</span>
            </div>
            <div class="userMaterialMaterialRight">
              <p>密码要求至少包含字母，符号或数字中的两项且长度超过8位，建议您经常修改密码，以保证账号更加安全。</p>
              <button class="default" @click="showChangeAccountTab(2)">更换</button>
            </div>
          </li>
        </ul>
      </div>
      <div class="userSecureChangeAccount">
        <div class="userSecureChangeAccountCommon" v-show="changeAccountIndex === 0">
          <h2>邮箱账号</h2>
          <input type="text" placeholder="旧邮箱" v-model="email">
          <input type="text" placeholder="新邮箱" v-model="newEmail">
<!--          <label for="">-->
<!--            <input type="text" placeholder="验证码">-->
<!--            <img src="" alt="">-->
<!--          </label>-->
          <div class="btnBox">
            <button class="btnDef" @click="handChangeEmail()">确定</button>
            <button class="btnDef btnClose" style="margin-left: .2rem;" @click="hideChangeAccountTab()">取消</button>
          </div>
        </div>
        <div class="userSecureChangeAccountCommon" v-show="changeAccountIndex === 1">
          <h2>手机账号</h2>
          <input type="text" placeholder="原手机号" v-model="mobile">
          <input type="text" placeholder="新手机号" v-model="newMobile">
          <label for="checkCodeId">
            <input id="checkCodeId" type="text" placeholder="验证码" v-model="checkCode">
            <span @click="handCheckCode()">{{checkCodeText}}</span>
          </label>
          <div class="btnBox">
            <button class="btnDef" @click="handChangeMobile()">确定</button>
            <button class="btnDef btnClose" style="margin-left: .2rem;" @click="hideChangeAccountTab()">取消</button>
          </div>
        </div>
        <div class="userSecureChangeAccountCommon" v-show="changeAccountIndex === 2">
          <h2>修改密码</h2>
          <input type="text" placeholder="原始密码" v-model="password">
          <input type="text" placeholder="新密码" v-model="repassword">
          <div class="btnBox">
            <button class="btnDef" @click="handChangePassword()">确定</button>
            <button class="btnDef btnClose" style="margin-left: .2rem;" @click="hideChangeAccountTab()">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'userSecure',
  data () {
    let userInfo = this.$store.state.user.userInfo
    return {
      userInfo: userInfo,
      changeAccountIndex: -1,
      mobile: '',
      newMobile: '',
      checkCode: '',
      checkCodeText: '获取验证码',
      password: '',
      repassword: '',
      email: '',
      newEmail: '',
      checkCodeFlag: false
    }
  },
  methods: {
    showChangeAccountTab (val) {
      this.changeAccountIndex = val
    },
    hideChangeAccountTab () {
      this.changeAccountIndex = -1
    },
    handCheckCode () {
      if (this.checkCodeFlag === true) {
        return
      }
      this.checkCodeFlag = true
      if (this.newMobile === '') {
        this.$vux.toast.text('请输入手机号')
        return
      }
      this.$api.getFecthChechCode({
        phone: this.newMobile
      }).then(res => {
        if (res.code === 0) {
          this.countDown(60)
        } else {
          this.checkCodeFlag = false
        }
      }).catch(() => {
        this.checkCodeFlag = false
      })
    },
    // 倒计时
    countDown (val) {
      if (val <= 0) {
        this.checkCodeFlag = false
        this.checkCodeText = '获取验证码'
        return
      }
      let time = val
      time--
      this.checkCodeText = '重新获取' + time
      setTimeout(() => {
        this.countDown(time)
      }, 1000)
    },
    // 修改邮箱
    handChangeEmail () {
      this.$api.getUpdateEmail({
        userId: this.$store.state.user.userId,
        oldEmail: this.email,
        email: this.newEmail
      }).then(res => {
        if (res.code === 0) {
          this.fetchUserInfoById()
          this.changeAccountIndex = -1
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 修改手机号
    handChangeMobile () {
      this.$api.getUpdatePhone({
        oldPhone: this.mobile,
        phone: this.newMobile,
        code: this.checkCode
      }).then(res => {
        if (res.code === 0) {
          this.fetchUserInfoById()
          this.changeAccountIndex = -1
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 修改密码
    handChangePassword () {
      this.$api.getUpdatePassword({
        oldPassword: this.password,
        newPassword: this.repassword,
        userId: this.$store.state.user.userId
      }).then(res => {
        if (res.code === 0) {
          this.changeAccountIndex = -1
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 获取用户信息
    fetchUserInfoById () {
      this.$api.getUserInfoById({
        id: this.$store.state.user.userId
      }).then(res => {
        this.$store.commit('setUserInfo', res.data)
      })
    }
  }
}
</script>

<style lang="less" scoped>
#userSecure{
  .userTaskContent{
    .userMaterialMaterial{
      ul{
        padding: .1rem 0;
        li{
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          align-items: center;
          padding: .2rem 0;
          .userMaterialMaterialLeft{
            width: 15%;
            padding-left: .2rem;
            span{
              font-size: .14rem;
              font-weight: 500;
              color: #333;
              line-height: .24rem;
              margin-left: .1rem;
            }
          }
          .userMaterialMaterialRight{
            width: 85%;
            padding-right: .2rem;
            p{
              width: 6rem;
              font-size: .14rem;
              font-weight: 500;
              line-height: .22rem;
              color: #333;
              display: inline-block;
              vertical-align: middle;
            }
            button.default{
              border: none;
              text-align: center;
              line-height: .22rem;
              font-size: .14rem;
              font-weight: 500;
              color: #fff;
              background-color: #15A29C;
              border-radius: .05rem;
              float: right;
              padding: .05rem .4rem;
              outline: none;
            }
          }
        }
      }
    }
    .userSecureChangeAccount{
      h2{
        font-size: .18rem;
        font-weight: 500;
        color: #333;
        line-height: .26rem;
        text-align: center;
        margin-bottom: .2rem;
      }
      input{
        display: inline-block;
        width: 100%;
        line-height: .4rem;
        background-color: #F9F9F9;
        border: 1px solid #DDDDDD;
        border-radius: .05rem;
        padding: 0 .1rem;
        margin-bottom: .2rem;
        font-size: .14rem;
      }
      label {
        font-size: 0;
        margin-bottom: .2rem;
        display: inline-block;
        width: 100%;
        input{
          width: calc(100% - 132px);
          margin-bottom: 0;
          vertical-align: middle;
          margin-right: .2rem;
        }
        span{
          display: inline-block;
          font-size: .16rem;
          font-weight: 500;
          color: #fff;
          line-height: .4rem;
          background-color: #15A29C;
          border: 1px solid #15A29C;
          text-align: center;
          border-radius: .05rem;
          width: 1.12rem;
          vertical-align: middle;
        }
        img{
          width: 1.12rem;
          height: .42rem;
          display: inline-block;
          background-color: #ccc;
        }
      }
      .userSecureChangeAccountCommon {
        width: 3.5rem;
        margin: auto;
        padding: .2rem;
      }
    }
  }
}
</style>
